<template>
    <div class="Home">
        <div v-for="(e,i) in styles" :style="e" :key="i">
        </div>
        <div class="btn"  @click="cl">
            点我去canvas版本
        </div>
    </div>
</template>
<script>
    export default {
        name: 'Home',
        data(){
            return{
                timer2:'',
                styles:[
                    {
                        width:'40px',
                        height:'40px',
                        timer:'',
                        left:'0px',
                        top:'0px',
                        states:{
                            temp1:0,
                            temp2:0,
                            a1:1,
                            a2:1
                        }
                    }
                ]
            }
        },
        methods:{
            cl(e){
                this.$router.push({
                    path:'/canvas'
                })
            },
            ran(){
                return parseInt(Math.random()*10+1);
            },
            anima(){
                const that=this;
                that.styles.forEach(e=>{
                    e.fn=function(){
                        if(parseInt(e.left)>=414-parseInt(e.width)){
                            e.states.a1=that.ran();
                            e.left=parseInt(e.left)-e.states.a1+'px';
                            e.states.temp1=1;
                        }else if(parseInt(e.left)<=0){
                            e.states.a1=that.ran();
                            e.left=parseInt(e.left)+e.states.a1+'px';
                            e.states.temp1=0;
                        }else{
                            if(e.states.temp1==0){
                                e.left=parseInt(e.left)+e.states.a1+'px'
                            }else{
                                e.left=parseInt(e.left)-e.states.a1+'px'
                            }
                        }
                        if(parseInt(e.top)>=(414-parseInt(e.height))){
                            e.states.a2=that.ran();
                            e.top=parseInt(e.top)-e.states.a2+'px';
                            e.states.temp2=1;
                        }else if(parseInt(e.top)<=0){
                            e.states.a2=that.ran();
                            e.top=parseInt(e.top)+e.states.a2+'px';
                            e.states.temp2=0;
                        }else{
                            if(e.states.temp2==0){
                                e.top=parseInt(e.top)+e.states.a2+'px'
                            }else{
                                e.top=parseInt(e.top)-e.states.a2+'px'
                            }
                        }
                        e.timer = requestAnimationFrame(e.fn);
                    }
                    e.timer = requestAnimationFrame(e.fn);
                })
            }
        },
        watch:{
            styles:function (n,o) {
                if(n.length>10){
                    this.styles.forEach(e=>{
                        cancelAnimationFrame(e.timer);
                    });
                    this.anima();
                    clearInterval(this.timer2);
                }else{
                    this.styles.forEach(e=>{
                        cancelAnimationFrame(e.timer);
                    });
                    this.anima();
                }
            }
        },
        mounted(){
            this.anima();
            this.timer2=setInterval(()=>{
                var w=parseInt(Math.random()*50+1)+40+'px';
                this.styles.push({
                    width: w,
                    height: w,
                    left:'0px',
                    top:'0px',
                    states:{
                        temp1:0,
                        temp2:0,
                        a1:5,
                        a2:5
                    }
                });
            },2000)
        }
    }
</script>
<style scoped lang="scss">
    @import "../styles/common.scss";

    .Home {
        position: relative;
        height: 414px;
        width:414px;
        border:1px solid green;
        > div {
            border-radius: 50%;
            background: #000000;
            @include font-dpr(12px);
            color: #fff;
            text-align: center;
            line-height: 40px;
            position:absolute;
        }
        >div.btn{
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height:40px;
        }
    }

</style>